<template>
    <view>
        <van-field :label="title" :value="current_value" :placeholder="placeholder" :required="required" :is-link="isLink" :input-align="inputAlign" readonly  @tap="openPicker"/>
        <van-popup :show="visible" position="bottom" :z-index="zIndex">
            <van-datetime-picker
                :type="dateType"
                :title="dateTitle"
                :min-date="minDate"
                :value="current_date"
                @cancel="closePicker"
                @confirm="selectDate"
                />
        </van-popup>
    </view>
</template>
<script>
export default {
    props:{
        isLink: {
            type: Boolean,
            default: () => {return true}
        },
        inputAlign: {
            type: String,
            default: () => 'left'
        },
        title: {
            type: String,
        },
        placeholder:{
            type: String,
            default: () => { return '请选择日期'}
        },
        value: {
            type: String
        },
        dateType:{
            type: String,
            default: () => {return 'date'}
        },
        dateTitle: {
            type: String
        },
        minDate:{
            type: Number,
            default: () => { return new Date('2022/01/01').getTime()}
        },
        zIndex:{
            type: Number,
            default: () => 100,
        },
        required:{
            type: Boolean,
            default: () => false,
        }
    },
    data(){
        return{
            visible: false,
        }
    },
    created(){
    },
    computed:{
        current_value: {
            get(){
                return this.value;
            },
            set(newVal){
                
            }
            
        },
        current_date(){
            if(this.value){
                return new Date(this.value).getTime();
            }else{
                return null;
            }
        }
    },
    methods:{
        openPicker(){
            if(this.isLink){
                this.visible = true;
            }
        },
        closePicker(){
            this.visible = false;
        },
        selectDate(e){
            let val =  this.formatDate(e.detail);
            this.current_value = val
            this.$emit('update:value', val);
            this.$emit('confirm', val);
            this.visible = false;
        },
        formatDate(needTime){
            var time = new Date(needTime);
            var y = time.getFullYear();
            var m = time.getMonth()+1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            var s = time.getSeconds();
            var cb;
            if(this.dateType == 'date'){
                cb =  y+'-'+this.addZero(m)+'-'+this.addZero(d);
            }else if(this.dateType == 'year-month'){
                cb = y+'-'+this.addZero(m);
            }else if(this.dateType == 'datetime'){
                cb = y+'-'+this.addZero(m)+'-'+this.addZero(d)+' '+this.addZero(h)+':'+this.addZero(mm)+':'+this.addZero(s);
            }else if(this.dateType == 'time'){
                cb = this.addZero(mm)+':'+this.addZero(s);
            }
            return cb;
        },
        addZero(m){
            return m<10?'0'+m:m 
        }
    }
}
</script>